<template>
	<div>
		<div class="mui-content">
			<div class="header-top">
				<div style="padding: 14px 10px;" class="header">
					<select name="" class="select0">
						<option :data-cityId=item.cityId v-for="item in city">{{item.cityName}}</option>
					</select>
					<!--<i class="mui-icon mui-icon-arrowdown arrow-bottom"></i>-->
					<div id="segmentedControl" class="mui-segmented-control">
						<a class="mui-control-item mui-active" type='new'>
							新房排行
						</a>
						<a class="mui-control-item" type='xiaoQu'>
							二手排行
						</a>
						<a class="mui-control-item" type='all'>
							组合排行
						</a>
						<!--<router-link class="mui-control-item" to="/allHouseRanking">
							全部
						</router-link>-->
					</div>
					<div class="rightText">
						<span>PK</span>
					</div>
					<!--<img src="static/images/fav.png" alt="" />-->
					
				</div>
				<router-view></router-view>
			</div>
			<div class="contain">
				<div id="item1" class="mui-control-content mui-active">
					<div class="searchcc">
						<input type="text" placeholder="请输入新房/二手房名称或地址" />
						<i class="mui-icon mui-icon-search"></i>
					</div>
					<div class="choose">
						<div v-for="item in selList" v-if="showInput">
							<span class="chooseName" style="width: 30%;">{{item.houseName}}</span>
							<img v-for="item in hasStar(item.score)" :src=item alt="" />
							<span class='score'>{{item.score}}分</span>
							<span style='margin-right:7px;color:#e51c23;'>{{item.price}}</span>
							<i class="mui-icon mui-icon-closeempty"></i>
						</div>
					</div>
					<ul class="mui-table-view newHouse">
						<li class=" mui-media" style='padding: 11px 9px;' v-for="(list,i) in houseList" :data-type=list.houseType>
							<input type="radio" class="check-box" v-show="showInput"/>
							
							<div class='houseId' :houseId=list.houseId  v-if="list.houseType=='new'?true:false">
								<img class="mui-media-object mui-pull-left" style="" :src=list.src>
								<!--<img class="mui-media-object mui-pull-left" style="" src="static/images/demo.jpg">-->
								<div class="mui-media-body" style='font-size:15px;'>
									<span class="nam">{{list.houseName}}</span>
									<span style='float:right;margin-right:10px;color:#e51c23;' class="ranking" v-show="list.houseCore">第{{i+1}}名</span>
									<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;color:#666;">{{list.houseAddress}}</p>
									<p class="mui-ellipsis star" style="margin-top:0px;margin-bottom:0;color:#666" v-if="list.houseCore">
										<img v-for="item in hasStar(list.houseCore)" :src=item alt="" />
										<span class='score'>{{list.houseCore}}分</span>　<span style='float:right;margin-right:7px;color:#e51c23;' v-if="list.housePrice" class="price">{{list.housePrice}}元</span><span style='float:right;margin-right:7px;color:#e51c23;' v-if="!list.housePrice">待定</span></p>
									<p class="mui-ellipsis star" style="margin-top:0px;margin-bottom:0;color:#666" v-if="!list.houseCore">
										<span style='float:right;margin-right:7px;color:#e51c23;'>待定</span>
									</p>
									<p class="mui-ellipsis" style="margin-top:0px;margin-bottom:0;">
										<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;" v-if="list.houseLabel" v-for="item in list.houseLabel">{{item}}</span>
									</p>
								</div>
							</div>
							<div class='houseId' :houseId=list.houseId  v-if="list.houseType=='xiaoQu'?true:false">
								<img class="mui-media-object mui-pull-left" style="" :src=list.src>
								<div class="mui-media-body" style='font-size:15px;'>
									<span class="nam">{{list.houseName}}</span>
									<span style='float:right;margin-right:10px;color:#e51c23;' class="ranking">第{{i+1}}名</span>
									<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;color:#666;">{{list.houseAddress}}</p>
									<p class="mui-ellipsis" style="margin-top:0px;margin-bottom:0;color:#666">
										<img v-for="item in hasStar(list.houseCore)" :src=item alt="" />
										<span class='score'>{{list.houseCore}}分</span>　<span style='float:right;margin-right:7px;color:#e51c23;' class="price">{{list.housePrice}}元</span></p>
									<p class="mui-ellipsis" style="margin-top:0px;margin-bottom:0;">
										<!--<span style="line-height:20px;color:#0186c2;margin:1px;padding:2px 4px;font-size:12px;">房源(60套)</span>-->
										<span style="line-height:20px;margin:1px;padding:2px 4px;font-size:12px;">2011年建造</span>
									</p>
								</div>
							</div>
						</li>
						<li class="show" style="margin-bottom: 50px;text-align: center;">
							<img src="static/images/loading.gif" style="width: 50px;"/>
						</li>
					</ul>
					<div class="comeduibi" v-show="showInput">
						<span class="active">{{duibi}}</span>
						<!--<router-link tag='span' to='/duibixiangqing'>进行对比</router-link>-->
					</div>
				</div>
			</div>
		</div>
		
		<div class="top0">
			为你筛选{{allListNum}}条信息
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				houseList: [],
				houseType: 'new',
				star: [],
				city:[],
				allListNum:'',
				num:0,
				showInput:false,
				selList:[],
				labels:[],
				flag:true,
				duibi:'进行PK'
			}
		},
		created: function() {
		//可以通过这样写直接跳转到列表页面
		//http://localhost:8080/#/houseRanking?cityName=%E5%8C%97%E4%BA%AC&HouseType=new
		
			 
			var that = this;
			if(this.$route.query.cityName){
				this.reload();
			}
			var data = JSON.parse(localStorage.getItem('data'));
			
			data.page=1;
			localStorage.setItem('data', JSON.stringify(data));
	        $.ajax({
                type:"get",
                url:`${ajaxURL}/houseweb/front/index.do`,
				cache:false,
                success:function(res){
                	var data = JSON.parse(res)
                	that.city=data.data;
					let city0=localStorage.getItem("cityName");
					let cityId=localStorage.getItem("city");
					$('.select0').append(`<option data-cityId=${cityId}>${city0}</opntion>`)
					var cc=[]
					for(var i=0;i<data.data.length;i++){
						if(data.data[i].cityName!=city0){
							cc.push(data.data[i])
						}
					}
					that.city=cc;
                	that.ajaxU0(1, that.houseType);
                }
          })
	        if(localStorage.getItem('showInput')=='true' || localStorage.getItem('showInput')==null){
	        	that.showInput = false
	        }else{
	        	that.showInput = true
	        }
			
			
		},
		mounted: function() {
			var that = this;
			
//			if(JSON.parse(localStorage.getItem('selList')).length==2){
//				that.duibi='进行PK';
//				$('.comeduibi span').removeClass('active');
//				localStorage.setItem('showInput',true)
//			}
			
			if(this.$route.query.cityName){
				console.log(returnCitySN);
//				localStorage.setItem("ajaxURL", "http://47.94.93.148:8086");
//				localStorage.setItem('city', returnCitySN.cid);
//				let shengIdx = returnCitySN.cname.indexOf("省");
//				let cityName = returnCitySN.cname.slice(shengIdx + 1, -1);
//				localStorage.setItem('cityName', cityName);
				localStorage.setItem("type", "new");
				this.houseType = this.$route.query.HouseType;
				let ajaxURL=localStorage.getItem("ajaxURL");
//				let city = localStorage.getItem('city')
//				$.ajax({
//					type: "get",
//					dataType: "jsonp",
//					url: `${ajaxURL}/houseweb/H5/indexMapInit_new.do?city=${city}&houseType=new`,
//					success: function(mapData) {
//						console.log(1111111111111)
//						localStorage.setItem('fireNewHouse',JSON.stringify(mapData.data.fireNewHouse))
//						localStorage.setItem('screenMetro', JSON.stringify(mapData.data.screenMetro));
//						localStorage.setItem('screenPrice', JSON.stringify(mapData.data.screenPrice));
//						localStorage.setItem('screenSpace', JSON.stringify(mapData.data.screenSpace));
//						that.ajaxU0(1, that.houseType);	
//					}
//				})
				$.ajax({
	                type:"get",
	                url:`${ajaxURL}/houseweb/front/index.do`,
	                success:function(res){
	                	var data = JSON.parse(res)
	                	for(var i=0;i<data.data.length;i++){
	                		if(data.data[i].cityName==that.$route.query.cityName){
	                			localStorage.setItem('city', data.data[i].cityId);
	                			localStorage.setItem('cityName', data.data[i].cityName);
	                			let city = localStorage.getItem('city')
	                			$.ajax({
									type: "get",
									url: `${ajaxURL}/houseweb/H5/indexMapInit_new.do?city=${city}&houseType=new`,
									success: function(data) {
										var mapData = JSON.parse(data)
										console.log(mapData)
										localStorage.setItem('fireNewHouse',JSON.stringify(mapData.data.fireNewHouse))
										localStorage.setItem('screenMetro', JSON.stringify(mapData.data.screenMetro));
										localStorage.setItem('screenPrice', JSON.stringify(mapData.data.screenPrice));
										localStorage.setItem('screenSpace', JSON.stringify(mapData.data.screenSpace));
										that.reload();
										that.ajaxU0(1, that.houseType);	
									}
								})
	                		}
	                	}
	                }
	            })
				this.reload();
				
			}else{
				
			}
			let ajaxURL=localStorage.getItem("ajaxURL");
			
			setTimeout(function(){
				$('.top0').show(200)
				setTimeout(function(){
					$('.top0').hide(500);
				},1000);
			},500);
			
			if(localStorage.getItem('type')=='xiaoQu'){
				this.houseType = 'xiaoQu';
				$('#segmentedControl a[type=xiaoQu]').addClass('mui-active').siblings().removeClass('mui-active');
			}else if(localStorage.getItem('type')=='new'){
				this.houseType = 'new';
				$('#segmentedControl a[type=new]').addClass('mui-active').siblings().removeClass('mui-active');
			}else{
				this.houseType = 'all';
				$('#segmentedControl a[type=all]').addClass('mui-active').siblings().removeClass('mui-active');
			}
//	        $('.arrow-bottom').click(function(){
//	        	$('.select0').click()
//	        })
			$('.select0').change(function(){
				that.reload();
				var cityId = $(this).children("option:selected").attr('data-cityId');
				var city = $(this).children("option:selected").text();
				if($(this).children("option:selected")){
					$(this).find('span').show().siblings().find('span').hide();
				}
				localStorage.setItem("city",cityId);
				localStorage.setItem("cityName",city);
				var data = JSON.parse(localStorage.getItem('data'));
				data.city = cityId;
				data.page=1;
				localStorage.setItem('data', JSON.stringify(data));
				that.houseList = [];
				$.ajax({
					type: "get",
					url: `${ajaxURL}/houseweb/H5/indexMapInit_new.do?city=${cityId}&houseType=new`,
					cache: false,
					success: function(data) {
						var mapData = JSON.parse(data)
						console.log(mapData);
						that.pointList = mapData.data.points;
						localStorage.setItem('fireNewHouse',JSON.stringify(mapData.data.fireNewHouse))
						localStorage.setItem('screenMetro', JSON.stringify(mapData.data.screenMetro));
						localStorage.setItem('screenPrice', JSON.stringify(mapData.data.screenPrice));
						localStorage.setItem('screenSpace', JSON.stringify(mapData.data.screenSpace));
						that.ajaxU0(1, that.houseType);
						location.reload();
					}
				})
				
			})
			
			
			$('#segmentedControl').on('click', 'a', function() {
				$(this).addClass('mui-active').siblings().removeClass('mui-active');
				that.houseType = $('#segmentedControl .mui-active').attr('type');

				localStorage.setItem('type',that.houseType)
				
				that.reload()
				that.houseList = [];
				that.ajaxU0(1, that.houseType);
//				location.reload();
			})
//			
//			页面滚动 
				$(window).scroll(function() {
					if(that.flag){
						var i = 1;　　
						var scrollTop = $(this).scrollTop();　　
						var scrollHeight = $(document).height();　　
						var windowHeight = $(this).height();　　
						var data = JSON.parse(localStorage.getItem('data'));
						if(scrollTop + windowHeight == scrollHeight) {　　　　
						//					alert("已经到最底部了！");
							setTimeout(function() {
								if(that.allListNum>that.houseList.length) {
									++i;
									data.page++;
									localStorage.setItem('data', JSON.stringify(data));
									this.ajaxU0(i, that.houseType)　
								}else{
									localStorage.setItem('data', JSON.stringify(data));
									$('.show').hide()
								}
							}.bind(that), 500);
						}
					}
				});
			

			//进入详情
			var that = this;
			var data =[];
			if(JSON.parse(localStorage.getItem('selList'))!=null){
				data = JSON.parse(localStorage.getItem('selList'));
			}
			 that.selList =data;
			$('.newHouse').on('click', 'li', function() {
				console.log(that.selList)
				if(that.showInput){
					if($(this).children('.check-box').prop('checked')){
						for(var i=0;i<data.length;i++){
							if($(this).children('div').attr('houseid')==data[i].houseId){
								data.splice(i,1)
							}
						}
						$(this).children('.check-box').prop("checked",false);
					}else{
						var data0 = {
							houseId:$(this).children('div').attr('houseid'),
							houseName:$(this).find('.nam').html(),
							price:$(this).find('.price').html(),
							type:$(this).attr('data-type'),
							score:$(this).find('.score').html()==undefined?'0':$(this).find('.score').html().substring(0,$(this).find('.score').html().length-1)
						}
						
						data.push(data0)
						
						var hash = {}; 
						data = data.reduce(function(item, next) { 
							hash[next.houseId] ? '' : hash[next.houseId] = true && item.push(next); 
							return item 
						}, []) 
						
						$(this).children('.check-box').prop("checked",true);
					}
					
					that.selList=data;
					localStorage.setItem('selList', JSON.stringify(data));
					
				}else{
					that.goNewDetail($(this).children('.houseId').attr('houseId'), $(this).attr('data-type'), $(this).find('.ranking').html().replace(/[^0-9]/ig,""));
				}
				if(data.length==2){
					$('.comeduibi span').removeClass('active');
					that.duibi='进行PK';
				}else{
					$('.comeduibi span').addClass('active');
					that.duibi='只能选择两项进行PK';
				}
				
			})
			$('.searchcc input').focus(function(){
				that.$router.push({
					path: '/search',
					name: 'search'
				});
			})
			

			
			//进行对比
			
			$('.rightText').click(function(){
				localStorage.setItem('showInput',that.showInput)
				if(that.showInput){
					that.showInput=false;
				}else{
					that.showInput=true
				}
				$('.comeduibi span').addClass('active');
			})
			//进入对比
			$('.comeduibi').click(function(){
				localStorage.setItem('selList', JSON.stringify(data));
				
				var selList= JSON.parse(localStorage.getItem('selList'));
				var type = localStorage.getItem('type');
				if($('.comeduibi span').hasClass('active')){
					$(this).attr("disabled",true);
				}else{
					that.$router.push({
						path: '/duibixiangqing',
						name: 'duibixiangqing',
						query:{
							type:type
						}
					});
				}
				
			})
			
			//删除对比项
			$('.choose').on('click','i',function(){
//				$(this).parent().remove();
				let ll = $(this).siblings('.chooseName').html();
				for(var i=0;i<data.length;i++){
					if(ll==data[i].houseName){
						data.splice(i,1)
					}
				}
				localStorage.setItem('selList', JSON.stringify(data));
				if(data.length==2){
					$('.comeduibi span').removeClass('active');
					that.duibi='进行PK';
				}else{
					$('.comeduibi span').addClass('active');
					that.duibi='只能选择两项进行PK';
				}
				that.houseList.forEach(function(v,i){
					if(v.houseName==ll){
						$('.newHouse li').eq(i).children('.check-box').prop("checked",false);
					}
				})
			})
			
			
				
		},
		methods: {
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore / 20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str!=5){
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) < 5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
			ajaxU0: function(page0, houseType) {
				$('.show').show()
				var that = this;
				that.flag=false;
				let ajaxURL = localStorage.getItem("ajaxURL");
				var data = JSON.parse(localStorage.getItem('data'));
				$.ajax({
					url: `${ajaxURL}/houseweb/H5/allHoustListDataInit.do`,
//					url: `${ajaxURL}/houseweb/test/HouseTest.do`,
//					url:'http://192.168.0.162:8080/houseweb/H5/allHoustListDataInit.do',
					data: data,
					success: function(res) {
						var data = JSON.parse(res)
						console.log(data)
						that.flag=true;
						if(data.data.houseList){
							that.num=data.data.houseList.length
						}
						that.allListNum = data.data.allNum;
						if(data.data.houseList.length==0 && that.houseList.length==0){
							setTimeout(function(){
								$('.show').html('暂无数据');
							},1000);
						}else if(data.data.houseList.length<9){
							$('.show').hide()
						}
						for(var i = 0; i < data.data.houseList.length; i++) {
							var arr=[];
							if(data.data.houseList[i].houseLabel==null){
								arr=[];
							}else{
								for(var j=0;j<data.data.houseList[i].houseLabel.split(',').length;j++){
									if(j<4){
										arr.push(data.data.houseList[i].houseLabel.split(',')[j]);
									}
								}
							}
							data.data.houseList[i].houseLabel=arr;
							that.houseList.push(data.data.houseList[i]);
						}
						
					}
				})
				
			},
			goNewDetail: function(id, houseType,rank) {
				console.log(houseType)
				this.$router.push({
					path: '/morexiangqing',
					name: 'morexiangqing',
					query: {
						id: id,
						type: houseType,
						ranking:rank
					}
				});
			},
			reload: function() {
				var city0 = localStorage.getItem('city');
				var city = localStorage.getItem('type');
				var obj = {};
				var data = {
					city: city0,
					page: 1,
					houseType: city,
					lng: '',
					lat: '',
					screenNearBy: {
						screenNearByNum: obj.screenNearBy,
						screenNearBySign: obj.screenNearBySign
					},
					screenPrice: {
						screenPriceNum: obj.screenPrice,
						screenPriceSign: obj.screenPriceSign
					},
					screenHuXing: obj.screenHuXing,
					screenCharacteristic: obj.screenCharacteristic,
					screenMetro: obj.screenMetro,
					screenMetroer: obj.screenMetroer,
					screenSpace: obj.screenSpace,
					screenTradArea: obj.screenTradArea,
					cheWeiBi: {
						cheWeiBiNum: obj.cheWeiBi,
						cheWeiBiSign: obj.cheWeiBiSign
					},
					sheQuGuiMo: obj.sheQuGuiMo,
				}
				localStorage.setItem('data', JSON.stringify(data));
			}
		}
	}
</script>
<style scoped>
	.mui-content {
		background-color: #fff;
	}
	
	.header-top {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		/*height: auto;
		background-color: transparent;*/
	}
	
	.header {
		position: absolute;
		width: 100%;
		top: 0;
		background-color: #0186C2;
	}
	/*.header img {
		position: absolute;
		width: 30px;
		height: 30px;
		top: 15px;
		left: 5%;
	}*/
	.header select {
		position: absolute;
		top: 15px;
		height: 30px;
		padding: 0 0 0 10px;
		margin: 0;
		width: auto;
    	min-width: 60px;
		background: #0186c2 url(../assets/images/del.png) right center no-repeat;
		background-size: 15px;
		color: #fff;
	}
	@media only screen and (max-width: 375px) {
	   .header select {
		position: absolute;
		top: 15px;
		height: 30px;
		padding: 0 0 0 10px;
		margin: 0;
		width: auto;
    	min-width: 60px;
		background: #0186c2 url(../assets/images/del.png) right center no-repeat;
		background-size: 15px;
		color: #fff;
	}
	}
	.mui-segmented-control .mui-control-item {
		color: #fff;
		border-color: #fff;
	}
	
	.mui-table-view .mui-media-object {
		line-height: 90px;
		max-width: 240px;
		height: 90px;
	}
	.rightText {
		position: absolute;
		top: 15px;
		right: 15px;
		line-height: 30px;
	    height: 30px;
	    width: 30px;
	    color: #fff;
	}
	.mui-segmented-control {
		border-color: #fff;
		width: 60%;
    	margin: 0 20%;
    	font-size: 13px;
	}
	
	.mui-segmented-control .mui-control-item.mui-active {
		background: #fff;
		color: #000000;
	}
	
	.mui-segmented-control .mui-control-item {
		line-height: 30px;
	}
	
	#item1 {
		margin-top: 110px;
	}
	
	#item1 input {
		font-size: 14px;
		width: 94%;
		margin: 11px 3%;
		background-color: #f8f8f8;
		color: #999;
		border: 0;
		height: 29px;
	}
	
	.searchcc {
		position: relative;
	}
	
	.searchcc i {
		color: #999;
		position: absolute;
		right: 3.6%;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.mui-table-view .mui-media-object {
		line-height: 90px;
		width: 130px;
		height: 90px;
	}
	
	.mui-table-view-cell:after {
		left: 0;
	}
	.newHouse {
		margin-bottom: 50px;
	}
	#item1 .check-box {
		width: 14px;
		height: 14px;
		float: left;
		margin-top: 36px;
		border-radius: 50%;
	}
	
	.contain p img {
		width: 14px;
	}
	.select0 span {
		display: none;
	}
	.arrow-bottom {
		position: absolute;
		color: #fff;
		top: 20px;;
		left: 15%;
		font-size: 20px;
	}
	.top0 {
		display: none;
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translate(-50%);
		text-align: center;
		width: auto;
		line-height: 48px;
		font-size: 12px;
		padding: 0 10px;
		background-color: #666;
		color: #fff;
		border-radius: 4px;
		z-index: 9999;
	}
	.comeduibi {
		position: fixed;
		bottom: 50px;
		width: 100%;
		line-height: 40px;
		text-align: center;
	}
	.comeduibi span {
		display: inline-block;
		width: 94%;
		background: #0186c2;
		color: #fff;
		border-radius: 4px;
	}
	.comeduibi span.active {
		background: #ccc;
	}
	.choose {
		background-color: #f8f8f8;
	}
	.choose div {
		font-size: 14px;
		padding: 5px 9px;
	}
	.choose i {
		float: right;
		font-size: 20px;
	}
	.choose img {
		width: 14px;
		vertical-align: baseline;
	}
	.choose span {
		display: inline-block;
		margin-right: 15px;
		height: 100%;
	}
	.choose span:first-child {
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>